<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js循环结构</title>
  <style>
    span{
      display: inline-block;
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: lightyellow;
      color: red;
      margin-right: 2px;
      margin-bottom: 2px;
      border: 1px solid blue;
    }
  </style>
  <script>
    // 1. while循环
    // 案例一：打印1-100所有数之和
    function test01(){
      // 1.1 定义一个求和变量和循环变量
      let sum = 0,i = 1         // ① i = 1 循环变量初始化
      // 1.2 开始求和
      while (i <= 100) {        // ② 代表循环条件
        // 1.2.1 开始求和
        sum += i
        // 1.2.2 循环变量的修改
        i++                     // ③ 循环变量的修改
      }
      // 1.3 输出求和结果
      console.log("sum = ",sum)
    }
    // test01()

    // 案例二：打印1-100之间个位数是3的数字，每5个一换行
    function test02(){
      // 2.1 定义循环变量
      let i = 1
      // 2.2 定义一个计数器，代表个位数是3的数字的个数
      let count = 0
      // 2.3 开始循环打印
      while (i <= 100) {
        // 2.3.1 个位数是3的数字之和
        if (i % 10 === 3){
           // ① 累加计数器
          count ++
          // ② 打印输出
          document.write("<span>" + i + "</span>")
          if (count % 5 === 0) {
            document.write("<br>")
          }
        }
        i++
      }
    }
    // test02()
    // 案例三：打印1-200之间即能被3整除又能被7整除的数字，每5个一换行
    function test03(){
      // 3.1 定义循环变量并初始化
      let i = 1
      // 3.2 定义计数器，统计满足条件的数字个数
      let count = 0
      // 3.3 开始循环统计
      while (i <= 200) {
        // 3.3.1 能被3和7整除
        if (i % 3 === 0 && i % 7 === 0) {
          // ① 打印数字
          document.write("<span>" + i + "</span>")
          // ② 累加计数器
          count ++
          // ③ 每5个一换行
          if (count % 5 === 0) {
            document.write("<br>")
          }
        }
        i++
      }
    }
    // test03()



  </script>
</head>
<body>

</body>
</html>
